<template>
    <div class="app-container">
        <div class="head">
            <img src="@/assets/img/Layout/position.png" />
            <p class="see-block">BOM详情</p>
        </div>
        <div class="view-container">
            <el-row class="status-title">
                <template v-if="detailData.deApprove !== '1'">
                    <el-col class="mr20 width100" v-if="detailData.approvalStatus == '0'">
                        <el-button
                            class="btn-default width100"
                            type="primary"
                            @click="check()"
                            v-hasPermi="['system:productBom:check']"
                        >审核</el-button>
                    </el-col>
                    <el-col class="mr20 width100" v-if="detailData.approvalStatus == '1' && detailData.status !== '2'">
                        <el-button
                            class="btn-default width100"
                            type="primary"
                            @click="reverseAudit()"
                            v-hasPermi="['system:productBom:deApprove']"
                        >反审核</el-button>
                    </el-col>
                    <el-col class="mr20 width100" v-if="detailData.approvalStatus == '2' || detailData.approvalStatus == '3'">
                        <el-button
                            class="btn-default width100"
                            type="primary"
                            @click="edit()"
                            v-hasPermi="['system:productBom:edit']"
                        >编辑</el-button>
                    </el-col>
                </template>
                <el-col :span="10" class="status-container">
                    <div class="status-item">
                        <span :class="{ 'active' : detailData.approvalStatus == '0'}">待审核</span>
                        <span :class="{ 'active' : detailData.approvalStatus == '1'}">已审核</span>
                        <span :class="{ 'active' : detailData.approvalStatus == '2'}">反审核</span>
                        <span :class="{ 'active' : detailData.approvalStatus == '3'}">拒绝</span>
                    </div>
                </el-col>
            </el-row>
            <el-row class="detail-item">
                <el-col :span="8">
                    <span>单据编号：</span>{{ detailData.code ?  detailData.code : '暂无'}}
                </el-col>
                <el-col :span="8">
                    <span>品名：</span>{{ detailData.specificationName ?  detailData.specificationName : '暂无'}}
                </el-col>
            </el-row>
            <el-row class="detail-item">
                <el-col :span="8">
                    <span>规格：</span>{{ detailData.specification ? detailData.specification : '暂无'}}
                </el-col>
                <el-col :span="8">
                    <span>单位：</span>{{ detailData.unit ? detailData.unit : '暂无'}}
                </el-col>
            </el-row>
            <el-row class="detail-item">
                <el-col :span="8">
                    <span>生效时间：</span>{{ detailData.effectiveTime ?  detailData.effectiveTime : '暂无'}}
                </el-col>
                <el-col :span="8">
                    <span>失效时间：</span>{{ detailData.failureTime ?  detailData.failureTime : '暂无'}}
                </el-col>
            </el-row>
            <el-row class="detail-item">
                <el-col :span="8">
                    <span>版本号：</span>
                    <template v-if="detailData.approvalStatus == '0' || detailData.approvalStatus == '2' || detailData.approvalStatus == '3'">
                        {{ detailData.version ? detailData.version : '暂无' }}
                    </template>
                    <el-select v-model="detailData.version" style="width:100%;" placeholder="请选择" @change="onChangeVersion" v-else>
                        <el-option
                            v-for="item in versionList"
                            :key="item.id"
                            :label="item.version"
                            :value="item.id"
                        />
                    </el-select>
                </el-col>
                <el-col :span="8">
                    <span>备注：</span>{{ detailData.remark ?  detailData.remark : '暂无'}}
                </el-col>
            </el-row>
            <el-row class="detail-item">
                <el-col :span="24">
                    <el-table :data="detailData.detailList">
                        <el-table-column label="序号" type="index" align="center" width="50" />
                        <el-table-column :label="item.label" :prop="item.prop" :width="item.width" v-for="(item, index) in columns" :key="index" align="center">
                            <template slot-scope="scope">
                                <template v-if="item.type == 'ifBom'">
                                    {{ scope.row.ifBom == '0' ? '否' : scope.row.ifBom == '1' ? '是' : '' }}
                                </template>
                                <template v-if="item.type == 'replaceManner'">
                                    {{ scope.row.replaceManner == '0' ? '无替代' : scope.row.replaceManner == '1' ? '可替代' : '' }}
                                </template>
                                <template v-if="item.type == '1'">
                                    {{ scope.row[item.prop] }}
                                </template>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-col>
            </el-row>
        </div>
        <!-- 审核/反审核 -->
        <el-dialog :visible.sync="open" width="500" top="100px" append-to-body title="审核意见" center>
            <el-row>
                <el-col :span="24">
                    <textarea
                        class="approve-textarea"
                        v-model="approveRemark"
                        type="textarea"
                        placeholder="请输入意见和看法"
                    />
                </el-col>
            </el-row>
            <div slot="footer" class="dialog-footer">
                <el-button
                    type="primary"
                    class="btn-success mr20 width100"
                    @click="agreeApprove()"
                >同意</el-button>
                <el-button
                    type="primary"
                    class="btn-cancel width100"
                    @click="disagreeApprove()"
                >拒绝</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { bomDetail, bomCheck, bomTheCheck } from "@/api/system/bom/bom"
export default {
    name: "detail",
    data() {
        return {
            id: '',
            detailData: '',
            // 表头
            columns: [{
                prop: "specificationCode",
                label: "物料编码",
                type: '1',
                width: 150,
            },{
                prop: "specificationName",
                label: "名称",
                type: '1',
                width: 180,
            },{
                prop: "unit",
                label: "单位",
                type: '1'
            },{
                prop: "usageAmount",
                label: "使用量",
                type: '1'
            },{
                prop: "lossAmount",
                label: "损耗量",
                type: '1'
            },{
                prop: "specification",
                label: "规格尺寸",
                type: '1'
            },{
                prop: "ifBom",
                label: "是否BOM",
                type: 'ifBom'
            },{
                prop: "productBomCode",
                label: "BOM编号",
                type: '1'
            },{
                prop: "version",
                label: "版本号",
                type: '1'
            },{
                prop: "replaceManner",
                label: "替代方式",
                type: 'replaceManner'
            },{
                prop: "replaceSpecificationCode",
                label: "物料编码",
                type: '1',
                width: 150,
            },{
                prop: "replaceSpecificationName",
                label: "物料名称",
                type: '1',
                width: 180,
            }],
            open: false,
            approveRemark: '',
            versionList: []
        }
    },
    created() {
        this.id = this.$route.query.id
        this.getDetail()
    },
    methods: {
        // 获取详细信息
        getDetail(){
            bomDetail(this.$route.query.id).then(res => {
                if(res.code == 200){
                    this.detailData = res.data
                    this.versionList = res.data.versionList
                }
            })
        },
        // 审核
        check(){
            this.open = true
        },
        agreeApprove(){
            let arr = this.detailData
            arr.approvalStatus = '1'
            bomCheck(arr).then(res => {
                if(res.code == 200){
                    this.getDetail()
                    this.open = false
                    this.$tab.closeOpenPage({ path: "/bom/list" })
                    this.$modal.msgSuccess("操作成功")
                }
            })
        },
        disagreeApprove(){
            let arr = this.detailData
            arr.approvalStatus = '3'
            bomCheck(arr).then(res => {
                if(res.code == 200){
                    this.getDetail()
                    this.open = false
                    this.$tab.closeOpenPage({ path: "/bom/list" })
                    this.$modal.msgSuccess("操作成功")
                }
            })
        },
        // 反审核
        reverseAudit(){
            this.$modal.confirm('是否确认反审核？', '反审核').then(() => {
                // bomTheCheck({id: this.$route.query.id,approvalStatus: '2' }).then(res => {
                bomTheCheck(this.detailData).then(res => {
                    if(res.code == 200){
                        this.getDetail()
                        this.$tab.closeOpenPage({ path: "/bom/list" })
                        this.$modal.msgSuccess("操作成功")
                    }
                })
            }).catch(() => {})
        },
        // 编辑
        edit(){
            this.$tab.closeOpenPage({ path: "/bom/edit", query:{ id: this.id } })
        },
        // 版本切换
        onChangeVersion(val){
            this.$tab.closeOpenPage({path:"/bom/detail", query:{ id: val }})
            this.getDetail()
        }
    }
}
</script>
